<template>
  <div style="height:300vw">
    <!-- 下拉显示 -->
        <div style="background:#eae9e5;padding:20px 0 1px 10px;position:fixed;top:0;width:100%;height:50px;z-index:999;" ref="dot" v-show="isShow">
          <span style="width:20px;height:20px;line-height:20px;display:inline-block; color:#fff;border-radius: 50%;background:#c1ab96;margin-right:15px;">
              <van-icon @click="toBack" name="arrow-left"/>
          </span>
          <span id="topText" :class=" topTextNum ==index ?  'topTextSelec':''" v-for="(item,index) in topText" @click="topTexts(index)">{{item}}</span>
        </div>
      <div id="navBox">
        <van-swipe :autoplay="3000" :duration="1000" indicator-color="#ffffff" style="height:200px" lazy-render>
          <van-swipe-item v-for="item in imgc.imgArr['img'] " :key="item">
            <img :src="item" />
          </van-swipe-item>
        </van-swipe>
      </div>
      
      <!-- 中间部分1 -->
      <div id="padd">
          <div>
            <span  style="font-size:1.2rem;font-weight:bold;display:inline-block">￥{{imgc.imgArr['jg']}}</span>
            <span id="textBrand">品牌直采</span>
          </div>
          <div>
            <span id="sui">税</span>
            <span id="suiNum">14.34</span>
            <p>
               <span style="font-weight:510;font-size:14px">{{imgc.imgArr['name']}}</span>
            </p>
             <p>
               <span style="font-weight:510;color:#ccbbaa;font-size:12px">{{imgc.imgArr['maos']}}</span>
            </p>
          </div>
      </div>
       <!-- 分隔栏 -->
       <div style="background:#eae9e5;height:10px;"></div>
       <!-- 中间部分2 -->
       <div id="padd" style="padding:5px 0 15px 15px;">
         <p>
           <span id="sp" >运费</span>
           <span id="sp" style="marginLeft:50px">{{imgc.imgArr['yf']}}</span>
         </p>
         <p>
           <span id="sp" >说明</span>
           <span id="sp" style="marginLeft:50px">{{imgc.imgArr['msd']}}</span>
         </p>
         <p>
           <span id="sp" >参数选择</span>
           <span id="sp" @click="shows" style="marginLeft:20px;color:#ccbbaa">{{imgc.imgArr['ys']}}</span>
               <!-- 动作面板 -->
              <van-action-sheet style="height:500px" v-model:show="show" title=" ">
              <div class="content">
                   <div style="display:flex">
                     <img id="Actimg" :src="imgc.imgArr['img'][0]" />
                     <div style="padding:10px 0 5px 10px">
                         <span style="color:red;font-weight:520;">￥{{imgc.imgArr['jg']}}</span><br/>
                           <span style="color:#ccc;font-size:10px">库存171件</span><br/>
                           <span style="font-size:12px;color:brown">已选 "{{color}}" {{size}}</span>
                     </div>
                   </div>
                    <!-- 颜色分类 -->
                  <div style="padding:10px 0 15px 10px;border-bottom: 1px solid #ccc;">
                      <span style="font-size:14px">颜色分类</span>
                      <div style="display:flex;justify-content: space-evenly;margin-top:10px">
                          <button id="btnC" v-for="(item,index) in btnText" :key="index" @click="select(item,index)" :class="oindex == index ? 'btnSele':''">{{item}}</button>
                      </div>
                  </div>
                    <!-- 尺码 -->
                  <div  style="padding:10px 0 15px 10px;border-bottom: 1px solid #ccc;">
                      <span style="font-size:14px">尺码</span>
                      <div style="display:flex;justify-content: space-evenly;margin-top:10px">
                          <button id="btnC" v-for="(item,index) in btnSize" :key="index" @click="selects(item,index)" :class="bindex == index ? 'btnSele':''">{{item}}</button>
                      </div>
                  </div>
                   <!-- 选择按钮 -->
                   <div style="padding:0px 0 25px 10px;">
                     <van-action-bar style="margin:20px auto;width:93%;">
                     <van-action-bar-button color="#f0d5b8" type="warning" text="加入购物车" />
                     <van-action-bar-button color="#c1ab96" type="danger" text="立即购买" />
                    </van-action-bar>
                   </div>
              </div>
            </van-action-sheet>
         </p>
       </div>
         <!-- 分隔栏 -->
       <div style="background:#eae9e5;height:10px;"></div>
          <!-- 品牌信息 -->
       <div id="padd">
           <p>
             <span id="sp">品牌信息</span>
           </p>
           <p>
             <span id="sp">品牌名</span>
             <span id="sp" style="marginLeft:30px;">{{imgc.imgArr['pp']}}</span>
           </p>
           <p>
             <span id="sp">原产地</span>
             <span id="sp" style="marginLeft:30px;">{{imgc.imgArr['ycd']}}</span>
           </p>
            <p>
             <span id="sp">风格</span>
             <span id="sp" style="marginLeft:45px;">{{imgc.imgArr['fgh']}}</span>
           </p>
       </div>
          <!-- 分隔栏 -->
       <div style="background:#eae9e5;height:10px;"></div>
        <div ref="useComent1" style="padding:5px">
           <p style="margin-left:10px;">
             <span id="sp">用户评价</span>
            <router-link to="/userComent"> <span style="color:#c1ab96;margin-left:65%;font-size:0.9rem" >查看所有</span></router-link>
           </p>
           <div style="border:1px solid #ccc;border-radius:5px;margin:10px auto;width:90%;padding:5px">
                <div style="display:flex">
                  <div>
                    <img src="https://img1.baidu.com/it/u=2386980173,2418364038&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666026000&t=25528b8a0f4735c9937d5ffca6f10d9d" width="30" height="30" style="border-radius:50%;" />
                  </div>
                  <div>
                   <span style="margin-left:10px;">OMINI.BASS</span><br/>
                   <span style="margin-left:10px;color:#ccc;font-size:0.7rem">2019-7-2</span>
                 </div>
                </div>
                <div style="padding:5px">
                    <div style="padding-bottom:5px">
                      <span style="font-size:0.9em">上身效果:穿着舒服,也很修身厚薄度:适中尺码推荐:自己选的,很合适材质特性:很喜欢这种材质面料品质:满意,特地穿了之后才来评价。面料做工都挺好,柔软且质量好</span>
                    </div>
                    <div>
                      <img :src="item" style="width:5rem;height:5rem;border-radius:5%;margin-right:0.9em" v-for="item in imgc.imgArr['img']" :key="item"/>
                    </div>
                </div>
              
           </div>
        </div>
          <!-- 分隔栏 -->
       <div style="background:#eae9e5;height:10px;"></div>
         <!-- 商品详情 -->
       <div ref="useComent2" style="padding:10px;font-weight:600">
          <p><span>商品详情</span></p>
          <img :src="imgCompent.imgC[2]" style="width:98%;height:20rem"/>
          <div style="padding:50px 0;">
             <span id="introduceText">袖口内侧有花格布衬托,两侧边使用隐形裁</span>
             <span id="introduceText">剪与隐形拉练 A(优点)吸湿性能强,光泽柔和,手感柔软</span>
             <span id="introduceText">有纳米级分子做屏障花格布的点缀,使得衣服更加活泼有趣味</span>
          </div>
          <img :src="imgCompent.imgC[3]" style="width:98%;height:20rem"/>
       </div>
           <!-- 分隔栏 -->
       <div style="background:#eae9e5;height:10px;"></div>
       <div ref="useComent3" style="background:#c1ab96;padding:20px 5px">
         
           <span>相似推荐</span>
           <div style="display:flex;flex-wrap:wrap;justify-content: space-around;margin:10px 0 50px 0">
              <div @click="aA(index)" style="width:47%;background: #fff;border-radius:3%;margin-bottom:10px;" v-for="(item,index) in imgSrc" :key="item" >
                <img :src="item.src" style="width:100%;height:15em;border-radius:3%;" /> <br/>
                <div style="padding:0 10px">
                    <span style="font-size 0.6em;">{{item.name}}</span><br/>
                    <span id="cuponColor">{{item.jiag}}</span><span id="cuponColor">{{item.juan}}</span><br/>
                    ￥<span>{{item.jg}}</span><br/>
                </div>
              </div>
           </div>
       </div>
         <!-- 动作栏 -->
       <div style="padding:5px 3px 5px 5px;position:fixed;bottom:0;width:100%;height:30px;z-index:999;">
          <van-action-bar>
            <van-action-bar-icon icon="shop-o" text="店铺" badge="12" />
            <van-action-bar-icon icon="chat-o" text="客服" dot />
           <van-action-bar-icon icon="star-o" text="收藏"  color="#000"/>
            <van-action-bar-button style="width:5px;height:30px;background:#f0d5b8;" type="warning" text="加入购物车" />
            <van-action-bar-button style="width:5px;height:30px;background:#c1ab96;"  type="danger" text="立即购买" />
          </van-action-bar>
       </div>
  </div>
</template>

<script setup lang="ts">
import {getShopList,getCarousImgs} from "@/servers/homeServer"
import { reactive, readonly, ref } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
import {getProductDetil} from "@/api/getCateList"
import {useRoute,useRouter} from 'vue-router'
import { watch } from "vue";
import { log } from "console";
let route = useRoute();
let router = useRouter();
   let use = ref<any>(0)
   let scollLength = ref<any>(0)
   let oindex = ref(0)
   let color = ref('淡金色')
   let size = ref(10)
   const btnText = reactive(['淡金色','渐变金','樱花粉','赤金色'])
  let select= (item:string,index:number)=>{
          color.value = item;
          oindex.value=index;
  } 

  let toBack = ()=>{
    window.history.go(-1);
  }
  //顶部分类
  let topTextNum = ref(0)
  const dot:any = ref(null) //顶部节点
  // const useComent = ref([])//评价节点
   const useComent1:any = ref(null)//评价节点
   const useComent2:any = ref(null)//评价节点
   const useComent3:any = ref(null)//评价节点

 //滚动监听事件
    
    
    let isShow = ref(false)
    let imgc:any = reactive({
         imgArr:[]  
           })
        //评价图片
    let  imgCompent:any = reactive({imgC:[]})
    //相似推荐图片
     let imgSimilar:any = reactive({SimilarC:[]})
     let imgSrc:any = ref([])
    
     let aA = (val:any)=>{
        router.push({path:'/shoppingDetail',query:{data:JSON.stringify(imgSrc.value[val])}})
        // console.log(imgSrc.value,1111);
        
    }


    onMounted(()=>{
               //获取商品详情数据
               console.log(JSON.parse(route.query.data));
               
                imgc.imgArr = JSON.parse(<string>route.query.data);
              getShopList()
              .then((res:any)=>{
                  imgSrc.value= res.data
                  // console.log(imgSrc.value);
              })
             getProductDetil()
             .then(res=>{
                // imgc.imgArr = res.data[0].img
               // console.log(res.data[0].img);
                 imgCompent.imgC = res.data[1].img
                 imgSimilar.SimilarC=res.data
             })
              window.onscroll = ()=>{
                        //let tp = dot.value.offsetTop; //距离顶部的距离
                        // useComent.value =useComent.value.offsetTop
                       
                      // console.log(use);
                        // let ih = window.innerHeight;屏幕高度
                        let sct = document.documentElement.scrollTop;//滚动卷起距离
                      if(sct>0){
                         isShow.value = true
                        // console.log(sct,"卷");
                         scollLength.value = sct
                         
                      }else{
                            isShow.value = false
                      }
                  //  console.log(isShow);
             
         }  
       //  console.log(useComent.value);
         
  })
   
  watch(route,(newVal)=>{
    console.log(route);
    if(route.query._value){
      imgc.imgArr = JSON.parse(route.query._value.data);
    }else{
      imgc.imgArr = JSON.parse(route.query.data);
    }
  })
  const topText = reactive(['商品','评价','详情','推荐'])
  function topTexts(index:number){
      topTextNum.value =index  

       if(index==1){
             document.documentElement.scrollTop = useComent1.value.offsetTop -70;
      } 
       if(index==2){
             document.documentElement.scrollTop = useComent2.value.offsetTop -70;
      } 
       if(index==3){
             document.documentElement.scrollTop = useComent3.value.offsetTop -70;
      } 
       if(index==0){
          document.documentElement.scrollTop = 0
      }
    
  }
 
  
  //尺寸选择
   let bindex = ref(1)
  const btnSize = reactive(['5cm','10cm','12cm','15cm'])
  let selects=(item:number,index:number)=>{
          size.value= item;
          bindex.value=index;
          
          
  } 

  let show = ref(false)
  let shows = ()=>{
     
      show.value=true;

      
  }
 
 
</script>

<style  scoped>
  #navBox{
      background-color: #eae9e5;
      height:200px;
      padding: 0px 5px 0;

     
  }
  #navBox img{
    height: 100%;
    width: 100%;
  }
  /* 下拉显示 */
  #topText{
    padding:14px 5% 16px 5% ;
    margin-left:10px ;
    font-size: 0.8rem;
     
  }
  .topTextSelec{
     border-bottom: 3px solid #c1ab96;
     color: #c1ab96;
  }
 #textBrand {
    color: #c1ab96;
    font-size: 12px;
    border: 1px solid goldenrod;
    background-color: #fff;
    border-radius: 3px;
    margin-top: -40px;
    padding: 3px 10px;
    margin-left: 20px;
  }  
  #sui{
    display: inline-block;
    padding: 1px 3px;
    border-radius: 3px;
    color: #fff;
    background: #ccbbaa;
    font-size:14px;
  }
  #suiNum{
    color: #ccbbaa;
    font-weight: 600;
    margin-left: 5px;
    font-size:14px;
  }
  #padd{
   padding:20px 15px 0;
  }
  #sp{
    font-weight: 700;
    font-size: 14px;
  }
  .content {
    padding: 16px 16px 160px;
    
  }
  #Actimg{
    width: 80px;
    height: 80px;
    border-radius: 10px;
    padding: 3px 7px;
  }
  #btnC{
    background-color: #f1efef;
    margin-top: 10px;
    font-size: 14px;
    height: 30px;
    border-radius: 5px;
    padding: 5px 9px;
    border:none;
  }
  .btnSele{
    border:1px solid #f1dac0!important;
    color:#f1dac0;
    background: #fff!important;
  }
  /* 介绍文字 */
  #introduceText{
     font-size: 0.8em;
     font-weight: 500;
     display: block;
     margin: 10px;
     text-align: center;
  }
  /*优惠券*/
  #cuponColor{
    color: #8e7e6f;
    font-size: 0.6em;
    border: 1px solid #8e7e6f;
    display: inline-block;
    padding: 1px 5px 1px 1px;
    margin: 0.1px;
    border-radius: 4%;
  }
 .van-action-bar{
   border-top:1px solid #ccc;
 }
</style>

